<!--

    Copyright (C) 2015 The Gravitee team (http://gravitee.io)

    Licensed under the Apache License, Version 2.0 (the "License");
    you may not use this file except in compliance with the License.
    You may obtain a copy of the License at

            http://www.apache.org/licenses/LICENSE-2.0

    Unless required by applicable law or agreed to in writing, software
    distributed under the License is distributed on an "AS IS" BASIS,
    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
    See the License for the specific language governing permissions and
    limitations under the License.

-->
<form name="apiProxyCtrl.formApi" ng-submit="apiProxyCtrl.update(apiProxyCtrl.api)" novalidate>
  <div class="gv-forms gv-forms-fluid" layout="column">
    <h1>Endpoints</h1>
    <div class="gv-form">
      <div class="gv-forms-header">
        <h2>Groups</h2>
      </div>
      <div class="gv-form-content">
        <div ng-repeat="group in apiProxyCtrl.api.proxy.groups" style="margin-bottom: 28px">
          <md-subheader>
            <div layout="row" layout-align="space-between center">
              <div>Group: {{group.name}}</div>
              <div>
                <md-button
                  class="md-icon-button"
                  aria-label="Add endpoint"
                  ui-sref="management.apis.detail.proxy.endpoint({groupName: group.name, endpointName: ''})"
                >
                  <ng-md-icon icon="add"></ng-md-icon>
                  <md-tooltip md-direction="left">Add new endpoint</md-tooltip>
                </md-button>
                <md-button
                  class="md-icon-button"
                  aria-label="Edit group"
                  ui-sref="management.apis.detail.proxy.group({groupName: group.name})"
                >
                  <ng-md-icon icon="settings"></ng-md-icon>
                  <md-tooltip md-direction="left">Edit group</md-tooltip>
                </md-button>
                <md-button
                  class="md-icon-button"
                  aria-label="Delete group"
                  ng-click="apiProxyCtrl.deleteGroup(group.name)"
                  ng-disabled="apiProxyCtrl.api.proxy.groups.length == 1"
                >
                  <ng-md-icon icon="delete" ng-show="apiProxyCtrl.api.proxy.groups.length > 1"></ng-md-icon>
                  <ng-md-icon
                    icon="delete"
                    style="fill: rgba(142, 158, 170, 0.54)"
                    ng-show="apiProxyCtrl.api.proxy.groups.length == 1"
                  ></ng-md-icon>
                  <md-tooltip md-direction="left">Delete group</md-tooltip>
                </md-button>
              </div>
            </div>
          </md-subheader>
          <md-table-container>
            <table md-table md-row-select="true" ng-model="selected" ng-init="order = 'name'" multiple="true">
              <thead md-head md-order="order">
                <tr md-row>
                  <th md-column md-order-by="name"><span>Name</span></th>
                  <th width="1%"></th>
                  <th md-column md-order-by="target"><span>Target</span></th>
                  <th md-column><span>Type</span></th>
                  <th ng-if="apiProxyCtrl.hasTenants()" md-column md-order-by="tenant" hide-gt-xs show-gt-sm>Tenants</th>
                  <th width="1%" md-column md-order-by="weight" md-numeric hide-gt-xs show-gt-sm><span>Weight</span></th>
                  <th width="1%" nowrap md-column permission permission-only="'api-definition-u'">
                    <md-button
                      class="md-icon-button"
                      aria-label="Delete endpoint"
                      ng-click="apiProxyCtrl.removeEndpoints($event)"
                      ng-disabled="selected.length == 0"
                    >
                      <ng-md-icon icon="delete" ng-show="selected.length > 0"></ng-md-icon>
                      <ng-md-icon icon="delete" style="fill: rgba(142, 158, 170, 0.54)" ng-show="selected.length == 0"></ng-md-icon>
                      <md-tooltip md-direction="left">Delete endpoint</md-tooltip>
                    </md-button>
                  </th>
                </tr>
              </thead>
              <tbody md-body>
                <tr md-row md-select="endpoint" md-auto-select="false" ng-repeat="endpoint in group.endpoints | orderBy:order">
                  <td md-cell ng-style="endpoint.backup ? {'font-style': 'italic','color': 'darkgrey'} : ''">{{endpoint.name}}</td>
                  <td md-cell hide-gt-xs show-gt-sm nowrap>
                    <ng-md-icon ng-show="apiProxyCtrl.hasHealthCheck(endpoint)" icon="favorite">
                      <md-tooltip md-direction="top">Health-check enabled</md-tooltip>
                    </ng-md-icon>
                    <ng-md-icon ng-show="endpoint.inherit" icon="subdirectory_arrow_right">
                      <md-tooltip md-direction="top">HTTP configuration inherited</md-tooltip>
                    </ng-md-icon>
                  </td>
                  <td md-cell ng-style="endpoint.backup ? {'font-style': 'italic','color': 'darkgrey'} : ''">{{endpoint.target}}</td>
                  <td md-cell>{{endpoint.type}}</td>
                  <td ng-if="apiProxyCtrl.hasTenants()" md-cell hide-gt-xs show-gt-sm>{{apiProxyCtrl.getTenants(endpoint.tenants)}}</td>
                  <td md-cell hide-gt-xs show-gt-sm ng-class="{'md-placeholder': !endpoint.weight}">{{endpoint.weight}}</td>
                  <td md-cell permission permission-only="'api-definition-u'">
                    <md-button
                      class="md-icon-button"
                      aria-label="Edit endpoint"
                      ui-sref="management.apis.detail.proxy.endpoint({groupName: group.name, endpointName: endpoint.name})"
                    >
                      <ng-md-icon icon="settings"></ng-md-icon>
                      <md-tooltip md-direction="left">Edit endpoint</md-tooltip>
                    </md-button>
                  </td>
                </tr>
              </tbody>
            </table>
          </md-table-container>
        </div>
        <md-content layout="row">
          <md-button class="md-raised" permission permission-only="'api-definition-u'" ng-click="apiProxyCtrl.createGroup()">
            Add a new group
          </md-button>
        </md-content>
      </div>
    </div>
  </div>

  <div class="md-actions gravitee-api-save-button" layout="row">
    <md-button
      permission
      permission-only="'api-definition-u'"
      class="md-raised md-primary"
      type="submit"
      ng-disabled="apiProxyCtrl.formApi.$invalid || apiProxyCtrl.formApi.$pristine"
    >
      Save
    </md-button>
    <md-button
      permission
      permission-only="'api-definition-u'"
      class="md-raised"
      type="button"
      ng-click="apiProxyCtrl.reset()"
      ng-disabled="apiProxyCtrl.formApi.$pristine"
    >
      Reset
    </md-button>
  </div>
</form>
